import React, { useState, useEffect } from 'react';
import {
    View,
    Text,
    TextInput,
    TouchableOpacity,
    StyleSheet,
} from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage'; // 引入AsyncStorage

const ProfileScreen = () => {
    const [profile, setProfile] = useState([
        { parameter: 'Name', value: 'Musk' },
        { parameter: 'Age', value: '53' },
        { parameter: 'Gender', value: 'male' },
        { parameter: 'Password', value: 'SpaceX' },
    ]);

    const handleSaveProfileSettings = async () => {
        try {
            // 将设置保存到本地
            await AsyncStorage.setItem('profileSettings', JSON.stringify(profile));
            console.log('Profile settings saved successfully!');
        } catch (error) {
            console.error('Error saving profile settings:', error);
        }
    };

    useEffect(() => {
        const loadProfileSettings = async () => {
            try {
                // 从本地存储中读取profile的值
                const savedProfile = await AsyncStorage.getItem('profileSettings');
                if (savedProfile) {
                    setProfile(JSON.parse(savedProfile));
                    console.log('Profile settings loaded successfully!');
                }
            } catch (error) {
                console.error('Error loading profile settings:', error);
            }
        };

        // 调用加载函数
        loadProfileSettings();
    }, []); // 依赖数组为空，表示只在组件加载时执行

    return (
        <View style={styles.container}>
            <Text style={styles.title}>Personal Profile</Text>
            {/* 个人资料设置 */}
            <View style={[styles.profileOutlet]}>
                {profile.map((item, index) => (
                    <View key={index} style={[styles.profile]}>
                        <Text style={[styles.text]}>{item.parameter}</Text>
                        <TextInput
                            style={[styles.input]}
                            value={item.value}
                            onChangeText={(text) => {
                                const updatedProfile = [...profile];
                                updatedProfile[index].value = text;
                                setProfile(updatedProfile);
                            }}
                        />
                    </View>
                ))}
            </View>
            <TouchableOpacity style={styles.saveButton} onPress={handleSaveProfileSettings}>
                <Text style={styles.ButtonText}>Save Profile</Text>
            </TouchableOpacity>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 16,
    },
    title: {
        fontSize: 28,
        fontWeight: 'bold',
        marginVertical: 10,
    },
    profileOutlet:{
        borderRadius: 8,
        backgroundColor: '#fff',
    },
    profile:{
        flexDirection: 'row',
        overflow: 'hidden',
        alignItems: 'center',
        justifyContent: "space-between",
        paddingHorizontal: 18,
        borderBottomWidth: 0.5,
        borderBottomColor: '#d9d6d6',
    },
    text: {
        color: '#676767',
        fontSize: 16,
    },
    input: {
        color: '#8f8f8f',
        fontSize: 14,
        minWidth: '30%',
        textAlign: 'right'
    },
    saveButton: {
        backgroundColor: '#0092fe',
        color: 'white',
        padding: 10,
        borderRadius: 5,
        alignItems: 'center',
        marginTop: 10,
    },
    ButtonText: {
        color: 'white',
    },
});

export default ProfileScreen;
